import React from 'react'
import {
    Form,
    Input,
    Button,
    Toast 
} from 'antd-mobile'
import request from '../../utils/request';
import { useDispatch } from 'react-redux';
import { localUserInfo } from '../../store/user/userSlice';
import { useNavigate } from 'react-router-dom';
function Login() {
    const dispatch=useDispatch()
    const navigate=useNavigate()
    const onFinish = async (values) => {
        // console.log('Success:', values);
        const res=await request.post('/login',values)
        if(res.status==200&&res.data.code==10000){
            dispatch(localUserInfo(res.data.data))
            Toast.show({
                icon: 'success',
                content: '登录成功',
              })
            navigate('/home')
        }else{
            Toast.show({
                icon: 'fail',
                content: '登录失败',
              })
        }
    }
  return (
    <div>
      <Form
        layout='horizontal'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Header>用户登录</Form.Header>
        <Form.Item
          name='username'
          label='手机号'
          rules={[
            { required: true, message: '手机号不能为空' },
            { pattern: /^1[3|5|7|8|9]{9}\d$/, message: '请输入正确的手机号'}
        ]}
        >
           <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[
            { required: true, message: '密码不能为空' },
            { min: 6, message: '密码不能少于6位' },
        ]}
        >
           <Input placeholder='请输入密码' type='password' />
        </Form.Item>
        </Form>
    </div>
  )
}

export default Login
